<template>
  <div class="df jc-sb w100" style="height: 100%;">

    <el-menu style="height: 100%;" :default-active="activeIndex" active-text-color="#ffd04b" background-color="#545c64" text-color="#fff" class="el-menu-vertical-demo" mode="vertical" :ellipsis="false" @select="handleSelect">

      <el-menu-item class="" :index="item.id" v-for="item in menuItem" :key="item.id" @click="to_page(item)">
        <el-icon>
          <!-- <setting /> -->
        </el-icon>
        <span> {{item.name}}</span>
      </el-menu-item>

    </el-menu>

 
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { useRouter } from "vue-router";
import { Setting } from "@element-plus/icons-vue";
const props = defineProps<{
  //   activeIndex: string;
  menuItem: any;
}>();
const activeIndex = ref(localStorage.getItem("activeIndex") || "1");
const router = useRouter();
const handleSelect = (key: string, keyPath: string[]) => {
  console.log(key, keyPath);
};

const to_page = (item) => {
  console.log(item);

  localStorage.setItem("activeIndex", item.id);

  router.push("/index" + item.path);
};
</script>

<style scoped lang="scss">
.el-menu {
  // margin-right: 200px;
  width: 100%;
}
</style>